<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <style>
    body{
      padding-top: 200px;
      background: lightblue;
      text-align: center;
    }
    .msg-panel {
      display: inline-block;
      background: #fff;
      color: #111111;
      padding: 10px 15px;
      font-size: 16px;
      border-radius: 0px 10px 10px 10px;
      white-space: pre-wrap;
      min-width: 80px;
    }
    
    @keyframes spark
      {
        0%   {border: 2px solid rgb(0, 0, 255);}
        25%  { border: 0px solid  transparent;}
        50%  {border: 2px solid rgb(0, 0, 255);}
        75%   { border: 0px solid  transparent;}
        100% {border: 0px solid rgb(0, 0, 255);}
      }
    .spark{
      animation: spark 4s;
    }
    .box {
      border: 1px solid black;
      width: 400px;
      height: 200px;
      overflow-x: hidden;
      font-size: 0;
    }
    .box-container{
      width: 1000px;
      transform: translate3d(0px, 0px, 0px);
      transition-duration: 200ms;
    }
    .box-item{
      display: inline-block;
      width: 200px;
      height:100px;
    }
    .i1{
      background-color: black;
    }
    .i2{
      background-color: red;
    }
    .i3{
      background-color: gray;
    }
    .i4{
      background-color: green;
    }
    .i5{
      background-color:rgb(0, 0, 255);
    }
       
    </style>
  </head>
  <body>
   
    <button id="play"> 点击动画</button> 
    <p></p>
    <div class="msg-panel" id="msg">
      eee
    </div>

    <div class="box">
      <div class="box-container"><div class="box-item i1"></div>
        <div class="box-item i2"></div>
        <div class="box-item i3"></div>
        <div class="box-item i4"></div>
        <div class="box-item i5"></div>
      </div>
    </div>
    <button id="moveBtn"> 点击动画</button>
    <script>
      //  重新播放css动画,我们只需要将CSS动画效果 删除 ，
      //  然后再 重新加上 css动画效果即可。那么如何让浏览器理解我们的意图呢,
      //  今天的主角requestAnimationFrame,这个任务就交给它来完成。
      //  requestAnimationFrame会告诉浏览器--你需要执行一个动画，
      //  并要求在下一次重绘前调用指定的回调函数更新动画。
      //  也就是 requestAnimationFrame需要传入一个回调函数作为参数，
      //  这个函数会在浏览器下一次重绘之前执行。 
      //  这个机制可以用花费最短的时间让浏览器理解我们需要重新播放动画的意图。

      
       var msg = document.querySelector('#msg');
       play.onclick = function(){
        msg.classList.remove('spark');
         window.requestAnimationFrame(()=>{
          msg.classList.add('spark');
          })
       }
       var container = document.querySelector(".box-container")
       var index = 0;
       moveBtn.onclick = function () {
        index ++;
        if (index == 4) {
          index = 0
        }
        container.style.transform = `translate3d(${-200 * index}px, 0px, 0px)`
       }

    </script>
  </body>
</html>